import React, { Component } from "react";
import { View, Text, Dimensions, TouchableOpacity } from "react-native";
// import { Toast } from "@ant-design/react-native";

import styles from "./styles";

class LabelGroup extends Component {
  render() {
    const {
      title = "",
      info = "",
      style,
      labels,
      selectedTag,
      // selectable = true,
      addable = false,
      onChange,
      addOnPress,
    } = this.props;

    const { width: screenWidth } = Dimensions.get("window");

    return (
      <View style={{ ...styles.root, ...style }}>
        <View style={styles.titleAndInfo}>
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.info}>{info}</Text>
        </View>
        <View style={styles.labels}>
          {labels.map &&
            labels.map(item => {
              const isSelected = selectedTag.some(
                sItem => sItem.id === item.id
              );
              return (
                <TouchableOpacity
                  key={item.id}
                  onPress={() => onChange(item.id, !isSelected)}
                  style={{
                    ...styles.labelView,
                    width: (screenWidth - 80) / 4,
                    backgroundColor: isSelected ? "rgb(244,245,245)" : "#FFF",
                    borderWidth: isSelected ? 0 : 0.5,
                  }}
                >
                  <Text style={styles.labelText}>{item.value}</Text>
                </TouchableOpacity>
              );
            })}
          {addable ? (
            <TouchableOpacity
              onPress={addOnPress}
              style={{
                ...styles.labelView,
                width: (screenWidth - 80) / 4,
              }}
            >
              <Text style={styles.labelText}>+添加</Text>
            </TouchableOpacity>
          ) : null}
        </View>
      </View>
    );
  }
}

export default LabelGroup;
